import { View } from '@tarojs/components';
import classNames from 'classnames';
import React from 'react';
import { AtModal, AtModalContent } from 'taro-ui';
import styles from './index.module.scss';

const ModalBody = ({ title, content }) => {
  return (
    <View className="modal-wrap">
      {title ? <View className="modal-title omit-1 ">{title}</View> : null}

      <View
        className={classNames('modal-content', {
          title: !!title,
          plain: typeof content === 'string',
        })}
      >
        {content}
      </View>
    </View>
  );
};

const ModalActions = ({
  cancelText,
  onCancel,

  confirmText,
  onConfirm,
}) => {
  if (!cancelText && !confirmText) {
    return null;
  }

  if (!cancelText && confirmText) {
    return (
      <View className="actions">
        <View className="action customePageStyle" onClick={onConfirm}>
          <View className="txt">{confirmText}</View>
        </View>
      </View>
    );
  }

  if (cancelText && !confirmText) {
    return (
      <View className="actions">
        <View className="action customePageStyle" onClick={onCancel}>
          <View className="txt">{cancelText}</View>
        </View>
      </View>
    );
  }

  return (
    <View className="actions">
      <View className="action" onClick={onCancel}>
        <View className="txt">{cancelText}</View>
      </View>
      <View className="split-line"></View>
      <View className="action customePageStyle" onClick={onConfirm}>
        <View className="txt">{confirmText}</View>
      </View>
    </View>
  );
};

const StandModal = ({
  className = '',

  isOpened = false,

  title,
  content,

  cancelText,
  confirmText,

  onConfirm,
  onClose,
  onCancel = onClose,

  // 点击浮层的时候时候自动关闭
  closeOnClickOverlay = true,
}) => {
  return (
    <View className={`${styles.StandModal} ${className}`}>
      <AtModal
        isOpened={isOpened}
        onClose={onClose}
        onCancel={onCancel}
        closeOnClickOverlay={closeOnClickOverlay}
      >
        <AtModalContent>
          <ModalBody {...{ title, content }} />

          <ModalActions
            {...{
              cancelText,
              onCancel,

              confirmText,
              onConfirm,
            }}
          />
        </AtModalContent>
      </AtModal>
    </View>
  );
};

export default StandModal;
